import React, { useState, useEffect } from 'react'
import { useQuery } from 'react-query'
import axios from 'axios'

export default function ReactQuery() {
  let [users, setUsers] = useState([])
  const { data, isLoading, isError } = useQuery('userData', () => axios.post('/api/users'))

  useEffect(() => {
    setUsers(data?.data?.users)
  }, [isLoading])

  if (isLoading) {
    return <div className="text-center text-3xl m-6">loading</div>
  }

  return (
    <div className="container mx-auto">
      <h1 className="text-center text-3xl m-6">ReactQuery</h1>
      <ul className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg mt-6">
        {users?.map((user: any) => (
          <li key={user?.id}>{user?.name}</li>
        ))}
      </ul>
    </div>
  )
}
